﻿
@{
    ViewBag.Title = "用户列表";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<style>
    .layui-table-cell {
        height: 100px;
        line-height: 100px;
    }
</style>
<div class="layui-row">
    <div class="layui-col-md1">
        <div style="width:100%;opacity: 0;">
            W
        </div>
    </div>
    <div class="layui-col-md10">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;text-align:center;">
            <legend>用户管理</legend>
        </fieldset>
        <div class="layui-form">
            <div class="layui-inline">
                <label class="layui-form-label">昵称：</label>
                <div class="layui-input-inline">
                    <input type="text" style="width:300px;" id="u_nikename" name="u_nikename" lay-verify="title" autocomplete="off" placeholder="请输入昵称" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" onclick="Search_User()">
                    <i class="layui-icon">&#xe615;</i> 搜索
                </button>
            </div>
           
        </div>



        <table id="demo1" lay-filter="test1"></table>
    </div>
    <div class="layui-col-md1 layui-">
        <div style="width:100%;opacity: 0;">
            W
        </div>
    </div>
</div>



<script type="text/html" id="barDemo">
    @*<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>*@
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="chongzhi">重置密码</a>
    <!-- 这里同样支持 laytpl 语法，如： -->

</script>

<!--时间格式化-->
<script id="createTime" type="text/html">
    {{#
    var date = new Date(parseInt(d.u_create_date.replace("/Date(", "").replace(")/", ""), 10));
    var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hour = date.getHours();
    var minute = date.getMinutes();
    var second = date.getSeconds();
    var dd = date.getFullYear() + "-" + month + "-" + currentDate;
    return dd;
    }}
</script>

<script type="text/html" id="sexTpl">
    {{#  if(d.u_sex === false){ }}
    <span style="color: #F581B1;">{{ '女' }}</span>
    {{#  } else if(d.u_sex === true){ }}
    <span style="color: #0026ff;">{{ '男' }}</span>
    {{#  } else {}}
    <span>{{ '未知' }}</span>
    {{# } }}

</script>

<script type="text/html" id="user_img">
    <img src="{{ d.u_img }}" width="150" height="100" />
</script>

<script>
    var table = layui.table;
    var form = layui.form
    
    //“方法级渲染”配置方式
    var tableIns = table.render({
        elem: '#demo1'
        , height: 615
        , limit: 10 //每页显示数
        , url: '/Admin/Home/Get_User_List/' //数据接口
        , page: true //开启分页
        , cols: [[ //表头
            { field: 'u_id', title: 'ID', width: 80, sort: true, fixed: 'left' }
            , { field: 'u_email', title: '邮件', width: 200 }
            , { field: 'u_name', title: '昵称', width: 100 }
            , { field: 'u_phone', title: '电话', width: 200 }
            , { field: 'u_create_date', title: '创建日期', sort: true, width: 200, templet: '#createTime' }
            , { field: 'u_sex', title: '性别', width: 100, templet: '#sexTpl' }
           
            , { field: 'u_img', title: '头像', width: 250 ,templet:'#user_img'}
            , { field: 'u_img', title: '头像路径', width: 250 }
            , { fixed: 'right', title: '操作', width: 150, align: 'center', toolbar: '#barDemo' } //这里的toolbar值是模板元素的选择器
        ]]
        //where: {token: 'sasasas', id: 123} //如果无需传递额外参数，可不加该参数
        //method: 'post' //如果无需自定义HTTP类型，可不加该参数
        , request: {
            pageName: 'pageIndex' //页码的参数名称，默认：page
            , limitName: 'pageSize' //每页数据量的参数名，默认：limit
        }    //如果无需自定义请求参数，可不加该参数
        , response: {

        } //如果无需自定义数据响应名称，可不加该参数
    });
    //监听工具条
    table.on('tool(test1)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的DOM对象

        if (layEvent === 'detail') { //查看
            //do somehing
        } else if (layEvent === 'del') { //删除
            layer.confirm('确定删除吗？', function (index) {
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
                //向服务端发送删除指令
                Del_User(obj.data.u_id);
            });
        } else if (layEvent === 'chongzhi') {

            chongzhi(obj.data.u_id);

        } else if (layEvent === 'edit') { //编辑
            //do something

            var html = '';
            html += '<div style="padding-left: 55px;">'
            html += '<form class="layui-form layui-form-pane" action="">'
            html += '    <div class="layui-form-item">'
            html += '     <label class="layui-form-label">昵称</label>'
            html += '     <div class="layui-input-inline">'
            html += '         <input type="text" name="u_name" id="u_name" value="' + obj.data.u_name + '" autocomplete="off" placeholder="昵称" class="layui-input">'
            html += '   </div>'
            html += '     </div>'
            html += '    <div class="layui-form-item">'
            html += '       <label class="layui-form-label">电话</label>'
            html += '       <div class="layui-input-inline">'
            html += '          <input type="text" name="u_phone" id="u_phone" Maxlength="11" value="' + obj.data.u_phone + '" lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input">'
            html += '  </div>'
            html += '       </div>'
            html += '    <div class="layui-form-item">'
            html += '       <label class="layui-form-label">邮件</label>'
            html += '       <div class="layui-input-inline">'
            html += '          <input type="text" name="u_email" id="u_email" value="' + obj.data.u_email + '" lay-verify="required" placeholder="请输入邮件" autocomplete="off" class="layui-input">'
            html += '  </div>'
            html += '       </div>'
            html += '<div class="layui-form-item">'
            html += '  <div class="layui-input-block" >'
            //html += '     <button class="layui-btn" lay-submit="" type="button" onclick="Edit_User("' + obj.data.u_id + '","' + obj.data.u_name + '","' + obj.data.u_phone + '","' + obj.data.u_email +'")" lay-filter="demo1">提交</button>'
            html += '     <button class="layui-btn" lay-submit="" type="button" onclick="Edit_User(' + obj.data.u_id + ')" lay-filter="demo1">提交</button>'
            html += '  </div>'
            html += '  </div>'
            html += '</form>'
            html += '</div>'

            //页面层
            layer.open({
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['420px', '280px'], //宽高
                content: html
            });
        }
    });

    function chongzhi(id) {
        $.post('/Admin/Home/Chong_Zhi', { id: id }, function (data) {
            if (data != "") {
                console.log(data);
                alert("修改成功，新密码是：" + data);
            } else {
                alert('修改失败');
            }
        })
    }

    function Edit_User(u_id) {
        var u_name = $("#u_name").val();
        var u_phone = $("#u_phone").val();
        var u_email = $("#u_email").val();
        if (u_name == "") {
            layer.alert('昵称不能为空');
            return;
        }
        if (u_phone == "") {
            layer.alert('电话不能为空');
            return;
        }
        if (String(u_phone).length != 11) {
            layer.alert('电话格式错误');
            return;
        }
        if (u_email == "") {
            layer.alert('Email不能为空');
            return;
        }

        //var r = /\w+([-+.]\w+)*@{@Html.Raw("@");}\w+([-.]\w+)*\.\w+([-.]\w+)*/;
        //var patrn = new RegExp(r);
        //var szReg=/^[A-Za-zd]+([-_.][A-Za-zd]+)*@{@Html.Raw("@");}([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/; 
        var szReg = /\w+([-+.]\w+)*@{@Html.Raw("@");}\w+([-.]\w+)*\.\w+([-.]\w+)*/;
        var bChk = szReg.test(u_email);
        if (!bChk) {
            layer.alert('Email格式错误');
            return;
        }


        $.post_str("/Admin/Home/Edit_User", { u_id: u_id, u_name: u_name, u_phone: u_phone, u_email: u_email }, function (data) {
                if (data === "1") {
                    tableIns.reload({
                        page: {
                            curr: 1 //重新从第 1 页开始
                    }
                    });
                    //如果你想关闭最新弹出的层，直接获取layer.index即可
                    layer.closeAll(); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
                    layer.alert("保存成功");
                }
                else
                    layer.alert(data);
            });
    }


    function Del_User(u_id) {
        $.post_str("/Admin/Home/Del_User", { u_id:u_id }, function (data) {
            if (data === "1") {
                tableIns.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
                layer.alert("删除成功");
            }
            else
                layer.alert(data);
        });
    }

    function Search_User() {
        var u_nikename = $("#u_nikename").val();
        tableIns.reload({
            url: '/Admin/Home/Get_User_List/'
            , limit: 10 //每页显示数
            , where: { //设定异步数据接口的额外参数，任意设
                pageIndex: 1,
                pageSize:10,
                nickName: u_nikename
            }
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });

    }

</script>